import React, { CSSProperties } from 'react';
import { PrimaryType } from "../variables"
import "./index.scss"

// export type PrimaryType = 'primary' | 'default' | 'danger' | 'link'
interface IProgressProps {
  // 进度
  percent: number;
  // 高度
  strokeHeight?: number;
  // 显示文字
  showText?: boolean;
  // 定义css
  styles?: CSSProperties;
  // 主题
  theme?: PrimaryType;
}
const Progress: React.FunctionComponent<IProgressProps> = (props) => {
  const {
    percent,
    strokeHeight,
    showText,
    styles,
    theme
  } = props
  return (
    <div className="ProgressBox">
      <div className="Lbxin-progress-bar" style={styles}>
            <div className="Lbxin-progress-bar-outer" style={{ height: strokeHeight }}>
                <div
                    className={`Lbxin-progress-bar-inner color-${theme}`}
                    style={{ width: `${percent}%` }}
                >
                    {showText && <span className="inner-text">{`${percent}%`}</span>}
                </div>
            </div>
        </div>
    </div>
  );
};
Progress.defaultProps = {
  percent: 0,
  strokeHeight: 15,
  showText: true,
  theme: 'primary'
}
export default Progress;
